<template>
  <div class="app-container">
      <el-row :gutter="10" style="margin-bottom:20px;">
      <el-col :span="5.5">
        <el-select
          v-model="searchValue.activity_id"
          placeholder="请选择活动主题"
          clearable
          filterable
          class="titlebus"
          @change="changeWork"
        >
          <el-option
            v-for="item in themeList"
            :label="item.title"
            :value="item.activity_id"
            :key="item.activity_id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchValue.status" placeholder="请选择状态" clearable filterable>
          <el-option
            v-for="item in stateList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="1">
        <el-button style=" background: #00BFD6; color: #FFFFFF; " @click="fetchData">
          搜索
          <i class="el-icon-search"></i>
        </el-button>
      </el-col>
      <!-- <el-col :span="1">
        <el-button style="margin-left:24px;" @click="reset">重置</el-button>
      </el-col>-->
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
      <el-table-column  label="序号" width="60" type="index">
        
      </el-table-column>
      <el-table-column label="评委老师"  >
        <template slot-scope="scope">
           <span>{{ scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评委角色" >
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
         <el-table-column class-name="status-col" label="评审状态" >
        <template slot-scope="scope">
          <!-- <el-tag :type="scope.row.type | statusFilter">{{ scope.row.status}}</el-tag> -->
          {{ scope.row.status}}
        </template>
      </el-table-column>
      <el-table-column label="评审统计"  >
        <template slot-scope="scope">
        目标{{scope.row.minimum}}，完成{{ scope.row.finish_total }}
        </template>
      </el-table-column>
   
      <el-table-column  prop="date" label="评审时间" >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.start_time }} -- {{scope.row.end_time}}</span>
        </template>
      </el-table-column>
    </el-table>
       <div style="margin:40px 0">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="searchValue.page"
        :limit.sync="searchValue.limit"
        @pagination="fetchData"
      />
    </div>
  </div>
  
</template>

<script>
import { getTeachers,} from '@/api/works'
import { getActivityList } from "@/api/activity";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
    themeList:[],
    stateList:[
    {
       value:1,
       label: "已完成"
    },
     {
       value:2,
       label: "未完成"
    }

    ],
        searchValue: {
        activity_id: null, //活动id
        status: '', //活动状态
         page: 1,
        limit: 10,
       
      },
       total: 0,
       tableData: [
       
      ],
      listLoading: false
    }
  },
  created() {
    this.getActive()
  },
  methods: {
  getActive(){
     getActivityList().then(res => {
      this.themeList = res.list;
      const firstOption = this.themeList[0];
      if (firstOption) {
        this.searchValue.activity_id = firstOption.activity_id;
        this.title = firstOption.title;
        this.fetchData();
      }
    });
  },
   changeWork(value) {
   if (value) {
      let themtype = this.themeList.find(item => item.activity_id === value);
      this.title = themtype.title;
   }
    
    },
    handleSizeChange(val) {
      this.searchValue.limit = val;
      this.fetchData();
    },
    reset() {
        this.searchValue.activity_id = null
        this.searchValue.status = null
        this.searchValue.page = 1
        this.searchValue.limit = 10
        this.total = 0
        this.getActive()
    },
    fetchData() {
      this.listLoading = true
      let params = Object.assign({}, this.searchValue)
       getTeachers(params).then(res => {
       res.list.forEach((item) => {
        if (item.finish_total - item.minimum   >=0) {
          item.status ='已完成'
        
        }else{
          item.status ='未完成'
          
        }
       })
        this.tableData = res.list;
        this.total = res.total || 0;
        this.listLoading = false;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.titlebus {
  width: 300px;
  max-width: 300px;
}
</style>